<template>
  <el-card shadow="none">
    <el-form inline>
      <el-form-item>
        <el-input v-model="searchParams.name" style="width: 319px" placeholder="请输入作业或责任人名称" suffix-icon="el-icon-search" />
      </el-form-item>
      <el-form-item label="选择时间：">
        <el-date-picker
          v-model="searchParams.timeValue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label-width="20px">
        <div class="refresh-icon" />
      </el-form-item>

      <el-form-item label-width="20px" style="float: right">
        <el-button type="primary" icon="el-icon-document">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="table-box">
      <el-table
        v-loading="loading"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="selection" width="50px" />
        <el-table-column label="名称" prop="名称" />
        <el-table-column label="调度状态" prop="调度状态">
          <template slot-scope="scope">
            <div style="display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:#2FDCB1 " />
            调度中
          </template>
        </el-table-column>
        <el-table-column label="调度方式" prop="调度方式">
          <template slot="header" slot-scope="scope">
            <el-dropdown trigger="click">
              <span>
                调度方式<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>正常调度</el-dropdown-item>
                <el-dropdown-item>其他调度</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column label="调度周期" prop="调度周期" />
        <el-table-column label="作业优先级" prop="作业优先级">
          <template slot="header" slot-scope="scope">
            <el-dropdown trigger="click">
              <span>
                作业优先级<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>一级</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>

        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        />
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
  </el-card>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  mixins: [crud],
  data() {
    return {
      searchParams: {
        timeValue: []
      },
      tableData: [
        {}, {}, {}
      ],
      columns: [
        { prop: '调度开始时间', label: '调度开始时间', width: '', minWidth: '' },
        { prop: '调度结束时间', label: '调度结束时间', width: '', minWidth: '' },
        { prop: '责任人', label: '责任人 ', width: '', minWidth: '' },
        { prop: '最后修改人', label: '最后修改人', width: '', minWidth: '' },
        { prop: '创建人', label: '创建人', width: '', minWidth: '' }
      ]
    }
  }
}
</script>

<style lang="scss">
</style>
